<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>工作台</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="gutter-example" id="gutter-example">
      <a-row :gutter="24">
        <a-col :span="16" class="gutter-row">
          <a-card title="各港口箱量" :bordered="false" class="work_title">
            <template slot="extra">
              <a-button-group>
                <a-button
                  type="primary"
                  :ghost="everyPortStatus === 0 ? false : true"
                  @click="everyPort(0)"
                >全部</a-button>
                <a-button
                  type="primary"
                  :ghost="everyPortStatus === 1 ? false : true"
                  @click="everyPort(1)"
                >出口重箱</a-button>
                <a-button
                  type="primary"
                  :ghost="everyPortStatus === 2 ? false : true"
                  @click="everyPort(2)"
                >进口重箱</a-button>
                <a-button
                  type="primary"
                  :ghost="everyPortStatus === 3 ? false : true"
                  @click="everyPort(3)"
                >空箱</a-button>
              </a-button-group>
            </template>
            <div class="gutter-box">
              <!-- 各港口箱量 -->
              <div class="allPort">
                <div id="allPortChart" style="width:50%;"></div>
                <div class="allPortLabel">
                  <div class="item-label" v-for="(v,k) in data" :key="k">
                    <template v-if="v.name != '暂无数据'">
                      <span class="idot" :style="{'background-color': color[k]}"></span>
                      <span class="name">{{v.name}}</span>
                      <span
                        class="percent"
                      >| {{( total === 0 ? 0 : v.value*100 / total).toFixed(0)}}%</span>
                      <span class="number">{{v.value}} 个</span>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </a-card>
          <a-tabs
            :active-key="currentTab"
            :animated="false"
            style="min-height:387px; padding-bottom:0px; margin-top:24px; background:#fff;"
            :tab-bar-gutter="16"
            class="chuanb box_work"
            @change="tabChange"
          >
            <a-tab-pane v-for="v in portList" :key="v.id" :tab="v.name" style="padding:0;">
              <a-card :bordered="false">
                <a-row>
                  <a-col :span="12">
                    <div class="portChart1"></div>
                    <div class="allPortLabel">
                      <div
                        class="item-label"
                        v-for="(v,k) in data3"
                        :key="k"
                        style="width: 190px; margin: 0px auto; line-height: 35px;"
                      >
                        <span class="idot" :style="{'background-color': color[k]}"></span>
                        <span class="name">{{v.name}}</span>
                        <span
                          class="percent"
                        >| {{( total3 === 0 ? 0 : v.value*100 / total3).toFixed(0)}}%</span>
                        <span class="number">{{v.value}} 个</span>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div class="portChart2"></div>
                    <div style="display:flex; width: 220px; margin: 0px auto;">
                      <div class="allPortLabel" style="margin-right:20px">
                        <div
                          class="item-label"
                          v-for="(v,k) in data4.slice(0,2)"
                          :key="k"
                          style="line-height: 35px;"
                        >
                          <span class="idot" :style="{'background-color': color[k]}"></span>
                          <span class="name">{{v.name}}</span>
                          <span class="number">| {{v.value}} 个</span>
                        </div>
                      </div>
                      <div class="allPortLabel">
                        <div
                          class="item-label"
                          v-for="(v,k) in data4.slice(2)"
                          :key="k"
                          style=" line-height: 35px;"
                        >
                          <span class="idot" :style="{'background-color': color[k]}"></span>
                          <span class="name">{{v.name}}</span>
                          <span class="number">| {{v.value}} 个</span>
                        </div>
                      </div>
                    </div>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">
                    <div class="portChart3"></div>
                    <div class="allPortLabel">
                      <div
                        class="item-label"
                        v-for="(v,k) in data5"
                        :key="k"
                        style="width: 190px; margin: 0px auto; line-height: 35px;"
                      >
                        <span class="idot" :style="{'background-color': color[k]}"></span>
                        <span class="name">{{v.name}}</span>
                        <span
                          class="percent"
                        >| {{( total6 === 0 ? 0 : v.value*100 / total6).toFixed(0)}}%</span>
                        <span class="number">{{v.value}} 个</span>
                      </div>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div class="portChart4"></div>
                    <div class="allPortLabel">
                      <div
                        class="item-label"
                        v-for="(v,k) in data6"
                        :key="k"
                        style="width: 190px; margin: 0px auto; line-height: 35px;"
                      >
                        <span class="idot" :style="{'background-color': color[k]}"></span>
                        <span class="name">{{v.name}}</span>
                        <span
                          class="percent"
                        >| {{( total6 === 0 ? 0 : v.value*100 / total6).toFixed(0)}}%</span>
                        <span class="number">{{v.value}} 个</span>
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </a-card>
            </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :span="8" class="gutter-row">
          <a-card title="船公司集装箱" :bordered="false" class="work_title">
            <div class="gutter-box" style="min-height:998px;">
              <a-button-group>
                <a-button
                  type="primary"
                  :ghost="shipCompanyStatus === 0 ? false : true"
                  @click="shipCompany(0)"
                >全部</a-button>
                <a-button
                  type="primary"
                  :ghost="shipCompanyStatus === 1 ? false : true"
                  @click="shipCompany(1)"
                >出口重箱</a-button>
                <a-button
                  type="primary"
                  :ghost="shipCompanyStatus === 2 ? false : true"
                  @click="shipCompany(2)"
                >进口重箱</a-button>
                <a-button
                  type="primary"
                  :ghost="shipCompanyStatus === 3 ? false : true"
                  @click="shipCompany(3)"
                >空箱</a-button>
              </a-button-group>
              <a-form layout="inline" style="margin-top:20px">
                <a-form-item label="港口">
                  <a-select @change="handleSelectChange" v-model="portId" style="width:120px;">
                    <a-select-option value>全部</a-select-option>
                    <a-select-option v-for="(v,k) in portList" :key="k" :value="v.id">{{v.name}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-form>
              <!-- 船公司集装箱 -->
              <div id="shipCompanyChart"></div>
              <div class="allPortLabel">
                <div
                  class="item-label"
                  v-for="(v,k) in data2"
                  :key="k"
                  style="width: 200px; margin: 0px auto; line-height: 35px;"
                >
                  <template v-if="v.name != '暂无数据'">
                    <span class="idot" :style="{'background-color': color[k]}"></span>
                    <span class="name">{{v.name}}</span>
                    <span
                      class="percent"
                    >| {{( total3 === 0 ? 0 : v.value*100 / total2).toFixed(0)}}%</span>
                    <span class="number">{{v.value}} 个</span>
                  </template>
                </div>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import { queryPortNameList } from '@/api'
import {
  getPortContainerQuantity,
  getShipCompanyContainerQuantity,
  getPortContainerStatus
} from '@/api/boxManagementCenter'
const color = [
  '#3AA1FF',
  '#4ECB73',
  '#36CBCB',
  '#FBD437',
  '#F2637B',
  '#975FE4'
]
export default {
  data () {
    return {
      portList: [],
      color,
      everyPortStatus: 0,
      shipCompanyStatus: 0,
      portId: '',
      currentTab: '',
      data: [],
      total: 0,
      data2: [],
      total2: 0,
      data3: [],
      total3: 0,
      data4: [],
      total4: 0,
      data5: [],
      total5: 0,
      data6: [],
      total6: 0
    }
  },
  methods: {
    portListRequest (e) {
      queryPortNameList(e)
        .then(res => {
          this.portList = res.data
          let firstPortId = res.data[0].id
          this.currentTab = firstPortId
          this.portContainerStatusRequest({
            portId: firstPortId
          })
        })
        .catch(rs => {})
    },
    // 各港口箱量
    everyPortQuantityRequest (e) {
      getPortContainerQuantity(e)
        .then(res => {
          // // console.log(res.data)
          let data = []
          let total = 0
          if (res.data.length > 0) {
            res.data.forEach(v => {
              let newObj = {
                value: v.quantity,
                name: v.portName
              }
              data.push(newObj)
              total += v.quantity
            })
          } else {
            data = [
              {
                value: 0,
                name: '暂无数据'
              }
            ]
          }

          this.data = data
          this.total = total
          let everyPortChart = this.$echarts.init(
            document.getElementById('allPortChart')
          )
          this.drawLine(everyPortChart, '总箱量', total, data, '41%')
        })
        .catch(rs => {})
    },
    // 船公司集装箱
    shipCompanyRequest (e) {
      getShipCompanyContainerQuantity(e)
        .then(res => {
          let data2 = []
          let total2 = 0
          if (res.data.length > 0) {
            res.data.forEach(v => {
              let newObj = {
                value: v.quantity,
                name: v.holder
              }
              data2.push(newObj)
              total2 += v.quantity
            })
          } else {
            data2 = [
              {
                value: 0,
                name: '暂无数据'
              }
            ]
          }

          this.data2 = data2
          this.total2 = total2
          let shipCompanyChart = this.$echarts.init(
            document.getElementById('shipCompanyChart')
          )
          this.drawLine(shipCompanyChart, '在场总箱量', total2, data2)
        })
        .catch(rs => {})
    },
    // 港口箱况箱量查询
    portContainerStatusRequest (e) {
      getPortContainerStatus(e)
        .then(res => {
          let temData = res.data
          // 总箱量
          let data3 = [
            { value: temData.totalEmptyQuantity, name: '空箱' },
            { value: temData.totalExportHeavyQuantity, name: '出口重箱' },
            { value: temData.totalImoprtHeavyQuantity, name: '进口重箱' }
          ]
          let total3 = 0
          data3.forEach(v => {
            total3 += v.value
          })
          this.data3 = data3
          this.total3 = total3
          let containers1 = document.getElementsByClassName('portChart1')
          for (let i = 0; i < containers1.length; i++) {
            let chart1 = this.$echarts.init(containers1[i])
            this.drawLine(chart1, '总箱量', total3, data3, '40%')
          }
          // 空箱箱量
          let data4 = [
            { value: temData.aquantity, name: 'A' },
            { value: temData.commonQuantity, name: '普通' },
            { value: temData.brokenQuantity, name: '坏箱' },
            { value: temData.dirtyQuantity, name: '污箱' }
          ]
          let total4 = 0
          data4.forEach(v => {
            total4 += v.value
          })
          this.data4 = data4
          this.total4 = total4
          let containers2 = document.getElementsByClassName('portChart2')
          for (let j = 0; j < containers2.length; j++) {
            let chart2 = this.$echarts.init(containers2[j])
            this.drawLine(chart2, '空箱箱量', total4, data4, '40%')
          }
          // 超期箱
          let data5 = [
            { value: temData.overDueEmptyQuantity, name: '空箱' },
            { value: temData.overDueExportHeavyQuantity, name: '出口重箱' },
            { value: temData.overDueImportHeavyQuantity, name: '进口重箱' }
          ]
          let total5 = 0
          data5.forEach(v => {
            total5 += v.value
          })
          this.data5 = data5
          this.total5 = total5
          let containers3 = document.getElementsByClassName('portChart3')
          for (let k = 0; k < containers3.length; k++) {
            let chart3 = this.$echarts.init(containers3[k])
            this.drawLine(chart3, '超期箱', total5, data5, '40%', 'red')
          }
          // 3天后超期箱
          let data6 = [
            { value: temData.dueSoonEmptyQuantity, name: '空箱' },
            { value: temData.dueSoonExportHeavyQuantity, name: '出口重箱' },
            { value: temData.dueSoonImportHeavyQuantity, name: '进口重箱' }
          ]
          let total6 = 0
          data6.forEach(v => {
            total6 += v.value
          })
          this.data6 = data6
          this.total6 = total6
          let containers4 = document.getElementsByClassName('portChart4')
          for (let k = 0; k < containers3.length; k++) {
            let chart4 = this.$echarts.init(containers4[k])
            this.drawLine(chart4, '3天后超期箱', total6, data6, '40%', 'red')
          }
        })
        .catch(rs => {})
    },
    drawLine (target, text, subtext, data, textPosition, fontColor) {
      // 绘制图表
      target.setOption(
        {
          title: {
            text: text,
            textStyle: {
              color: fontColor ? '#D9001B' : '#666',
              fontWeight: 'normal',
              fontSize: 14
            },
            subtext: subtext === 0 ? '0' : subtext,
            subtextStyle: {
              color: fontColor ? '#D9001B' : '#666',
              fontWeight: 'bold',
              fontSize: textPosition ? 20 : 26
            },
            top: textPosition || '43%',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: function (data) {
              return (
                data.seriesName +
                '<br/>' +
                data.name +
                ' : ' +
                data.value +
                ' (' +
                data.percent.toFixed(0) +
                '%)'
              )
            }
          },
          legend: {
            selectedMode: 'true',
            top: 0,
            left: 10,
            orient: 'vertical',
            textStyle: {
              fontSize: 14,
              color: '#666'
            },
            show: false
          },
          series: [
            {
              name: '箱量',
              type: 'pie',
              radius: ['70%', '85%'],
              selectedMode: 'single',
              label: {
                show: false,
                position: 'center'
              },
              color: color,
              data: data
            }
          ]
        },
        true
      )
    },
    removeEveryPortInstance () {
      document
        .getElementById('allPortChart')
        .removeAttribute('_echarts_instance_')
    },
    removeShipPortInstance () {
      document
        .getElementById('shipCompanyChart')
        .removeAttribute('_echarts_instance_')
    },
    removeContainerStatusInstance () {
      let containers1 = document.getElementsByClassName('portChart1')
      for (let i = 0; i < containers1.length; i++) {
        containers1[i].removeAttribute('_echarts_instance_')
      }
      let containers2 = document.getElementsByClassName('portChart2')
      for (let j = 0; j < containers2.length; j++) {
        containers2[j].removeAttribute('_echarts_instance_')
      }
      let containers3 = document.getElementsByClassName('portChart3')
      for (let k = 0; k < containers3.length; k++) {
        containers3[k].removeAttribute('_echarts_instance_')
      }
    },
    everyPort (e) {
      this.everyPortStatus = e
      this.removeEveryPortInstance()
      let paramObj = {}
      if (e === 0) {
        paramObj.emptyOrHeavy = ''
        paramObj.importOrExport = ''
      } else if (e === 1) {
        paramObj.emptyOrHeavy = 2
        paramObj.importOrExport = 2
      } else if (e === 2) {
        paramObj.emptyOrHeavy = 2
        paramObj.importOrExport = 1
      } else if (e === 3) {
        paramObj.emptyOrHeavy = 1
        paramObj.importOrExport = ''
      }
      this.everyPortQuantityRequest(paramObj)
    },
    shipCompany (e) {
      this.shipCompanyStatus = e
      this.removeShipPortInstance()
      let paramObj = {
        portId: this.portId
      }
      if (e === 0) {
        paramObj.emptyOrHeavy = ''
        paramObj.importOrExport = ''
      } else if (e === 1) {
        paramObj.emptyOrHeavy = 2
        paramObj.importOrExport = 2
      } else if (e === 2) {
        paramObj.emptyOrHeavy = 2
        paramObj.importOrExport = 1
      } else if (e === 3) {
        paramObj.emptyOrHeavy = 1
        paramObj.importOrExport = ''
      }
      this.shipCompanyRequest(paramObj)
    },
    handleSelectChange (value) {
      this.portId = value
      this.removeShipPortInstance()
      let paramObj = {
        portId: value
      }
      let tempValue = this.shipCompanyStatus
      if (tempValue === 0) {
        paramObj.emptyOrHeavy = ''
        paramObj.importOrExport = ''
      } else if (tempValue === 1) {
        paramObj.emptyOrHeavy = 2
        paramObj.importOrExport = 2
      } else if (tempValue === 2) {
        paramObj.emptyOrHeavy = 2
        paramObj.importOrExport = 1
      } else if (tempValue === 3) {
        paramObj.emptyOrHeavy = 1
        paramObj.importOrExport = ''
      }
      this.shipCompanyRequest(paramObj)
    },
    tabChange (key) {
      this.currentTab = key
      this.removeContainerStatusInstance()
      setTimeout(() => {
        this.portContainerStatusRequest({
          portId: key
        })
      }, 100)
    }
  },
  mounted () {
    this.portListRequest({
      status: 1,
      isContainerManagement: 1
    })
    this.everyPortQuantityRequest({
      emptyOrHeavy: ''
    })
    this.shipCompanyRequest({
      emptyOrHeavy: '',
      portId: ''
    })
  }
}
</script>

<style scoped>
.gutter-example {
  margin: 24px;
}
.gutter-example >>> .ant-row > div {
  background: transparent;
  border: 0;
}
.gutter-box {
  background: #fff;
  padding: 5px 0;
}
.allPort {
  display: flex;
}
.allPort #allPortChart {
  width: 250px;
  height: 250px;
}
#shipCompanyChart {
  width: 320px;
  height: 320px;
  margin: 0 auto;
}
.allPort .allPortLabel {
  flex: 1;
  padding: 54px 0;
  line-height: 35px;
}
.item-label {
  display: flex;
  align-items: center;
  justify-items: center;
  font-size: 14px;
}
.item-label .idot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 12px;
}
.item-label .name {
  color: #666;
  margin-right: 12px;
}
.item-label .percent {
  color: #ccc;
  margin-right: 12px;
}
.item-label .number {
  color: #666;
}
.portChart1,
.portChart2,
.portChart3,
.portChart4 {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
</style>
<style lang="less" scoped>
#gutter-example {
  /deep/ .ant-tabs-bar {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #e8e8e8 !important;
    /deep/ .ant-tabs-nav-container {
      margin-bottom: 0 !important;
    }
  }
  /deep/ .ant-tabs-tab {
    padding: 17.5px 24px !important;
  }
}
</style>
